﻿<!DOCTYPE html>
<html ng-app="sportsStore" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SportsStore</title>
    <script src="scripts/angular.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.css" rel="stylesheet" />
    <script>
        angular.module("sportsStore", ["customFilters"]);
    </script>
    <script src="Controllers/sportsStore.js"></script>
    <script src="filters/customFilters.js"></script>
    <script src="Controllers/productListControllers.js"></script>
</head>
<body ng-controller="sportsStoreCtrl">
    <div class="navbar navbar-inverse">
        <a href="#" class="navbar-brand">SPORT STORE</a>
    </div>
    <div class="panel panel-default row"
         ng-controller="productListCtrl">
        <div class="col-xs-3">
            <a ng-click="selectCategory()"
               class="btn btn-block btn-default btn-lg">Home</a>
            <a ng-repeat="item in data.products
               |orderBy: 'category'
               |unique:'category'"
               ng-click="selectCategory(item)"
               class="btn btn-block btn-default btn-lg">{{item}}</a>
        </div>
        <div class="col-xs-8">
            <div class="well"
                 ng-repeat="item in data.products
                 | filter:categoryFilterFn">
                <h3>
                    <strong>{{item.name}}</strong>
                    <span class="pull-right label label-primary">{{item.price|currency}}</span>
                </h3>
                <span class="lead">{{item.description}}</span>
            </div>
        </div>

    </div>
</body>
</html>
